<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <style>
        .form-floating {
            margin-top: 20px;
        }
    </style>
</head>
<body style="background: #F1F3F5;">
<nav class="navbar navbar-expand-sm bg-dark">
    <a class="navbar-brand ms-2" onclick="window.location.href='./index.html'">Music Online</a>
</nav>
<div class="container d-flex flex-column align-items-center">
    <h1 class="text-center mb-5 mt-5">Register</h1>
    <form id="register" style="width: 50vw;">
        <div class="form-floating">
            <input id="account" class="form-control" placeholder=" " name="account" type="text" required>
            <label for="account" class="form-label">Enter your account name</label>
        </div>
        <div class="form-floating">
            <input id="nickName" class="form-control" placeholder=" " name="nickName" type="text" required>
            <label for="nickName" class="form-label">Enter your nick name</label>
        </div>

        <div class="form-floating">
            <select id="sex" class="form-select" name="sex" required>
                <option value="0">Male</option>
                <option value="1">Female</option>
            </select>
            <label for="sex" class="form-label">Sex:</label>
        </div>

        <div class="form-floating">
            <input id="age" class="form-control" name="age" placeholder=" " type="number" required min="1" max="100">
            <label for="age" class="form-label">Age</label>
        </div>

        <div class="form-floating">
            <input id="mobile" class="form-control" name="phone" placeholder=" " type="number" min="0" maxlength="13">
            <label for="mobile" class="form-label">Your phone number</label>
        </div>

        <div class="form-floating">
            <input id="address" class="form-control" placeholder=" " name="address" type="text">
            <label for="address" class="form-label">Address:</label>
        </div>

        <div class="row">
            <div class="form-floating col-6">
                <input id="password" class="form-control" placeholder="Enter password" name="password" required
                       type="password">
                <label for="password">Password:</label>
            </div>
            <div class="form-floating col-6">
                <input id="password2" class="form-control" placeholder="Enter password" name="password2" required
                       type="password">
                <label for="password2">Password Again:</label>
            </div>
        </div>

        <button id="submit" type="button" class="btn btn-primary text-center mt-3">Submit</button>
        <button type="button" class="btn btn-primary text-center mt-3 ms-2"
                onclick="location.href='./login.html'">Back to Log in
        </button>
    </form>
</div>

<script>
    let server = "http://localhost:8010";

    $("#submit").click(function () {
        console.log("register clicked");
        if ($("#password").val() === $("#password2").val()) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: server + "/user/register",
                data: $("#register").serialize(),
                success: function (result) {
                    if (result.code === 200) {
                        location.href = "./login.html";
                    } else {
                        console.log(result.message);
                        alert(result.message);
                    }
                },
                error: function () {
                    console.log("register failed");
                    alert("Register Failed");
                }
            })
        } else {
            alert("Your password is not same.");
        }
    })
</script>
</body>
</html>